<template>
	<el-dialog :title="hasStaffPermission?'员工维护':(dataForm.id ? '升级' : '绑定')" :close-on-click-modal="false"
		:visible.sync="visible" @close="closeDialog">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">

			<el-form-item label="手机号" prop="phone">
				<el-input v-model="dataForm.phone" placeholder="手机号" @input='phoneInput' clearable
					:disabled="dataForm.id?true:false" />
				<!-- <el-button type="primary" @click="findByPhone(dataForm.phone)">查询</el-button> -->
				<span style="color: red;">{{userResult}}</span>
			</el-form-item>

			<div style="margin: 20px" v-if="!hasStaffPermission&&dataForm.id">
				<el-radio-group v-model="radioUpgrade" size="small" @change="radioUpgradeChange">
					<el-radio-button :label="0">选择会员</el-radio-button>
					<el-radio-button :label="1">绑定卡券</el-radio-button>
				</el-radio-group>
			</div>
			<el-form-item v-if="hasStaffPermission" label="门店" prop="departmentId">
				<el-select v-model="dataForm.departmentId" filterable placeholder="选择门店">
					<el-option v-for="(item,index) in departmentList" :key="item.id" :label="item.name"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item v-else-if="dataForm.id&&radioUpgrade==0" label="会员种类" prop="memberId">
				<el-select v-model="dataForm.memberId" @change="currOperatorChange" filterable placeholder="选择种类">
					<el-option v-for="(item,index) in memberList" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<div v-else-if="dataForm.id&&radioUpgrade==1">
				<el-form-item label="卡号" prop="serialNumber">
					<el-input v-model="dataForm.serialNumber" placeholder="卡号" @input='serialNumberInput' clearable/>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="dataForm.password" placeholder="密码" @input='passwordInput' clearable/>
				</el-form-item>
			</div>
			<!-- <el-form-item v-else-if="dataForm.id" label="会员等级" prop="level">
				<el-input v-model.number="dataForm.level" placeholder="会员等级" />
			</el-form-item> -->
			<!-- <el-form-item label="排序" prop="sort">
        <el-input type="number" v-model="dataForm.sort" placeholder="排序"/>
      </el-form-item> -->

		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false;userResult=''">取消</el-button>
			<el-button type="primary" @click="submitHandle()" v-if="hasStaffPermission">确定</el-button>
			<el-button type="primary" @click="submitHandle()" v-else-if="dataForm.id&&radioUpgrade==0">升级</el-button>
			<el-button type="primary" @click="submitHandle()" v-else-if="dataForm.id&&radioUpgrade==1">绑卡</el-button>
			<el-button type="primary" @click="submitHandle()" v-else>绑定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import {
		checkByPhone,
		upgrade,
		findById,
		add,
		becomeStaff,
		cardActivate
	} from '@/api/sys/user'
	import {
		list
	} from '@/api/sys/dept'

	export default {
		data() {
			var checkLevel = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('等级不能为空'));
				}
				if (!Number.isInteger(value)) {
					callback(new Error('请输入数字值'));
				} else {
					if (value < 0) {
						callback(new Error('等级不能为负'));
					} else {
						callback();
					}
				}
			};
			return {
				visible: false,
				dataTree: [],
				dataForm: {
					id: 0,
					phone: '',
					level: 0,
					memberId: null,
					departmentId: null,
					serialNumber: null,
					password: null
				},
				deptoptions: [],
				dataRule: {
					phone: [{
						required: true,
						message: '手机号不能为空',
						trigger: 'blur'
					}],
					level: [{
						validator: checkLevel,
						trigger: 'blur'
					}],
					sort: [{
						required: true,
						message: '排序不能为空',
						trigger: 'blur'
					}]
				},
				userResult: '',
				hasStaffPermission: false,
				departmentParam: {
					//当前页
					pageNum: 1,
					//每页显示条数
					pageSize: 100,
					searchKey: '',
					// orderBy: ''
				},
				memberParam: {
					//当前页
					pageNum: 1,
					//每页显示条数
					pageSize: 100,
					searchKey: '',
					// orderBy: ''
				},
				departmentList: [],
				memberList: [],
				radioUpgrade: 0
			}
		},
		methods: {
			init(id, phone, level, hasStaffPermission) {
				this.hasStaffPermission = hasStaffPermission
				console.log(id)
				console.log(phone)
				this.dataForm.id = id || '';
				this.visible = true;
				this.$nextTick(() => {
					this.$refs['dataForm'].resetFields();
					if (id) { //员工维护
						this.dataForm.id = id;
						this.dataForm.phone = phone;
						this.dataForm.level = level;
						if (hasStaffPermission) {
							//查询部门信息
							this.getDepartmentList()
							//查询员工信息，部门等
							this.request(findById, this.dataForm.id, this, data => {
								console.log(data)
								this.dataForm = data
								this.dataForm.departmentId == 0 ? this.dataForm.departmentId = null : this
									.dataForm.departmentId = this.dataForm.departmentId
							});
						} else { //升级
							this.getMemberList()
						}
					} else { //新增
						// this.findByPhone()
					}

				});
			},
			getDepartmentList() {
				this.request(list, this.departmentParam, this, data => {
					console.log(data)
					this.departmentList = data.list
					// this.tableData.data = data.list;
					// this.tableData.total = data.total;
					// this.dataForm.pageNum = data.pageNum;
					// this.tableData.loading = false;
				})
			},
			getMemberList() {
				this.request(listOnMarket, this.memberParam, this, data => {
					console.log(data)
					this.memberList = data
					// this.tableData.data = data.list;
					// this.tableData.total = data.total;
					// this.dataForm.pageNum = data.pageNum;
					// this.tableData.loading = false;
				})
			},
			submitHandle() {
				let promiseFun;
				if (this.hasStaffPermission) {
					console.log(this.dataForm)
					if (this.dataForm.departmentId == null) {
						this.error('请选择部门');
						return
					}
					this.request(becomeStaff, this.dataForm, this, data => {
						this.visible = false;
						this.userResult = '';
						this.$emit('refreshDataList');
					});
				} else if (this.dataForm.id&&this.radioUpgrade==0) {
					if (!this.dataForm.memberId) {
						this.error('请选择会员种类');
						return
					}
					for (var i = 0; i < this.memberList.length; i++) {
						if (this.memberList[i].id == this.dataForm.memberId) {
							console.log(this.memberList[i].level)
							if (this.memberList[i].level > this.dataForm.level && this.dataForm.level > 0) {
								this.$confirm('升级等级会覆盖您当前等级, 是否继续?', '提示', {
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning'
								}).then(() => {
									this.request(upgrade, this.dataForm, this, data => {
										this.visible = false;
										this.userResult = '';
										this.$emit('refreshDataList');
									});
								}).catch(() => {
									// this.$message({
									// 	type: 'info',
									// 	message: '已取消'
									// });
								});
								return
							}
						}
					}
					this.request(upgrade, this.dataForm, this, data => {
						this.visible = false;
						this.userResult = '';
						this.$emit('refreshDataList');
					});
				}else if(this.dataForm.id&&this.radioUpgrade==1){
					if (!this.dataForm.serialNumber) {
						this.error('请输入卡号');
						return
					}
					if (!this.dataForm.password) {
						this.error('请输入密码');
						return
					}
					
					this.request(cardActivate, this.dataForm, this, data => {
						this.visible = false;
						this.userResult = '';
						this.$emit('refreshDataList');
					});
				} else {
					this.request(add, this.dataForm.phone, this, success => {
						this.visible = false;
						this.userResult = '';
						this.$emit('refreshDataList');
					})
				}


			},
			closeDialog() {
				this.userResult = '';
			},
			//   findByPhone(phone){
			// console.log(phone)
			//     this.request(findByPhone, phone,this, data => {
			//         console.log(data)
			//     } )
			//   },
			phoneInput(phone) {
				if (!this.dataForm.id) {
					this.userResult = ''
					if (phone.length == 11) {
						this.request(checkByPhone, phone, this, success => {
							console.log(success)
							this.userResult = ''
						}, true, fail => {
							console.log(fail)
							this.userResult = fail.message
						}, error => {
							console.log(error)
						})
					}
				}
			},
			serialNumberInput(val) {
				
			},
			passwordInput(val) {
				
			},
			currOperatorChange(val) {
				console.log(val)
				this.$set(this.dataForm, this.dataForm.memberId, val)
			},
			radioUpgradeChange(val) {
				console.log(val)
				switch (val) {
					case 0:

						break;
					case 1:

						break;
				}
			}

		}
	}
</script>

<style lang="less" scoped>
	// .el-form-item__content {
	// 	display: flex;
	// }
	.el-input {
		margin-right: 10px;
		width: 270px;
		vertical-align: top;
	}
</style>
